<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>treegrid</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />

<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">

<h3>TreeGrid</h3>
<p>Extend from $.fn.datagrid.defaults. Override defaults with $.fn.treegrid.defaults.</p>

<h4>Dependencies</h4>
<ul>
	<li>datagrid</li>
</ul>

<h4>Usage</h4>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">table</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"tt"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">table</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-treegrid" style="display: none;">	&lt;table id="tt"&gt;&lt;/table&gt;
</textarea>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#tt'</span><span>).treegrid({&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;url:<span class="string">'treegrid_data.json'</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;idField:<span class="string">'id'</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;treeField:<span class="string">'name'</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;columns:[[&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{title:<span class="string">'Task&nbsp;Name'</span><span>,field:</span><span class="string">'name'</span><span>,width:180},&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:<span class="string">'persons'</span><span>,title:</span><span class="string">'Persons'</span><span>,width:60,align:</span><span class="string">'right'</span><span>},&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:<span class="string">'begin'</span><span>,title:</span><span class="string">'Begin&nbsp;Date'</span><span>,width:80},&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:<span class="string">'end'</span><span>,title:</span><span class="string">'End&nbsp;Date'</span><span>,width:80}&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;]]&nbsp;&nbsp;</span></li><li class="alt"><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-treegrid" style="display: none;">	$('#tt').treegrid({
		url:'treegrid_data.json',
		idField:'id',
		treeField:'name',
		columns:[[
			{title:'Task Name',field:'name',width:180},
			{field:'persons',title:'Persons',width:60,align:'right'},
			{field:'begin',title:'Begin Date',width:80},
			{field:'end',title:'End Date',width:80}
		]]
	});
</textarea>

<h4>Properties</h4>
<p>The properties extend from datagrid, below is the added properties for treegrid.</p>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>idField</td>
<td>string</td>
<td>Defines the key field to identify a tree node. required.</td>
<td>null</td>
</tr>
<tr>
<td>treeField</td>
<td>string</td>
<td>Defines the tree node field. required.</td>
<td>null</td>
</tr>
<tr>
<td>animate</td>
<td>boolean</td>
<td>Defines if to show animation effect when node expand or collapse.</td>
<td>false</td>
</tr>
<tr>
<td>loader</td>
<td>function(param,success,error)</td>
<td>
Defines how to load data from remote server. Return false can abort this action.
This function takes following parameters:<br>
param: the parameter object to pass to remote server.<br>
success(data): the callback function that will be called when retrieve data successfully.<br>
error(): the callback function that will be called when failed to retrieve data.
</td>
<td>json loader</td>
</tr>
<tr>
<td>loadFilter</td>
<td>function(data,parentId)</td>
<td>
Return the filtered data to display.
</td>
<td></td>
</tr>

</tbody></table>

<h4>Events</h4>
<p>The events extend from datagrid, below is the added events for treegrid.</p>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameters</strong></th>

<th><strong>Description</strong></th>
</tr>
<tr>
<td>onClickRow</td>
<td>row</td>
<td>Fires when user click a node.</td>
</tr>
<tr>
<td>onDblClickRow</td>
<td>row</td>
<td>Fires when user dblclick a node.</td>

</tr>
<tr>
<td>onClickCell</td>
<td>field,row</td>
<td>Fires when user click a cell.</td>
</tr>
<tr>
<td>onDblClickCell</td>
<td>field,row</td>
<td>Fires when user dblclick a cell.</td>
</tr>
<tr>
<td>onBeforeLoad</td>
<td>row, param</td>
<td>Fires before a request is made to load data, return false to cancel this load action.</td>
</tr>
<tr>
<td>onLoadSuccess</td>
<td>row, data</td>
<td>Fires when data loaded successfully.</td>
</tr>

<tr>
<td>onLoadError</td>
<td>arguments</td>
<td>Fires when data loaded fail, the arguments parameter is same as the 'error' function of jQuery.ajax.</td>
</tr>
<tr>
<td>onBeforeExpand</td>
<td>row</td>
<td>Fires before node is expanded, return false to cancel this expand action.</td>
</tr>
<tr>

<td>onExpand</td>
<td>row</td>
<td>Fires when node is expanded.</td>
</tr>
<tr>
<td>onBeforeCollapse</td>
<td>row</td>
<td>Fires before node is collapsed, return false to cancel this collapse action.</td>
</tr>
<tr>
<td>onCollapse</td>

<td>row</td>
<td>Fires when node is collapsed.</td>
</tr>
<tr>
<td>onContextMenu</td>
<td>e, row</td>
<td>Fires when node is right clicked.</td>
</tr>
<tr>
<td>onBeforeEdit</td>
<td>row</td>

<td>Fires when user start editing a node.</td>
</tr>
<tr>
<td>onAfterEdit</td>
<td>row,changes</td>
<td>Fires when user finish editing.</td>
</tr>
<tr>
<td>onCancelEdit</td>
<td>row</td>
<td>Fires when user cancel editing a node.</td>

</tr>
</tbody></table>

<h4>Methods</h4>
<p>
Many methods take a parameter named 'id', this parameter indicate the tree node value.
</p>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>

</tr>
<tr>
<td>options</td>
<td>none</td>
<td>Return the options of treegrid.</td>
</tr>
<tr>
<td>resize</td>
<td>options</td>
<td>Set treegrid size, the options contains two properties:<br>
width: the new width of treegrid.<br>

height: the new height of treegrid.</td>
</tr>
<tr>
<td>fixRowHeight</td>
<td>id</td>
<td>fix the specified row height.</td>
</tr>
<tr>
<td>loadData</td>
<td>data</td>
<td>Load the treegrid data.</td>

</tr>
<tr>
<td>reload</td>
<td>id</td>
<td>Reload treegrid data.</td>
</tr>
<tr>
<td>reloadFooter</td>
<td>footer</td>
<td>Reload footer data.</td>
</tr>

<tr>
<td>getData</td>
<td>none</td>
<td>Get the loaded data.</td>
</tr>
<tr>
<td>getFooterRows</td>
<td>none</td>
<td>Get the footer data.</td>
</tr>
<tr>

<td>getRoot</td>
<td>none</td>
<td>Get the root node, return node object</td>
</tr>
<tr>
<td>getRoots</td>
<td>none</td>
<td>Get the root nodes, return node array.</td>
</tr>
<tr>
<td>getParent</td>

<td>id</td>
<td>Get the parent node.</td>
</tr>
<tr>
<td>getChildren</td>
<td>id</td>
<td>Get the children nodes.</td>
</tr>
<tr>
<td>getSelected</td>
<td>none</td>

<td>Get the selected node and return it, if no node selected return null.</td>
</tr>
<tr>
<td>getSelections</td>
<td>none</td>
<td>Get all selected nodes.</td>
</tr>
<tr>
<td>getLevel</td>
<td>id</td>
<td>Get the specified node level.</td>

</tr>
<tr>
<td>find</td>
<td>id</td>
<td>Find the specifed node and return the node data.</td>
</tr>
<tr>
<td>select</td>
<td>id</td>
<td>Select a node.</td>
</tr>

<tr>
<td>unselect</td>
<td>id</td>
<td>Unselect a node.</td>
</tr>
<tr>
<td>selectAll</td>
<td>none</td>
<td>Select all nodes.</td>
</tr>
<tr>

<td>unselectAll</td>
<td>none</td>
<td>Unselect all nodes.</td>
</tr>
<tr>
<td>collapse</td>
<td>id</td>
<td>Collapse a node.</td>
</tr>
<tr>
<td>expand</td>

<td>id</td>
<td>Expand a node.</td>
</tr>
<tr>
<td>collapseAll</td>
<td>id</td>
<td>Collapse all nodes.</td>
</tr>
<tr>
<td>expandAll</td>
<td>id</td>

<td>Expand all nodes.</td>
</tr>
<tr>
<td>expandTo</td>
<td>id</td>
<td>Expand from root to specified node.</td>
</tr>
<tr>
<td>toggle</td>
<td>id</td>
<td>Toggles expanded/collapsed state of the node.</td>

</tr>
<tr>
<td>append</td>
<td>param</td>
<td>
Append nodes to a parent node. The 'param' parameter contains following properties:<br>
parent: the parent node id, if not assigned, append as root nodes.<br>
data: array, the nodes data.<br>
Code example:
<pre style="color:#006600">// append some nodes to the selected row
var node = $('#tt').treegrid('getSelected');
$('#tt').treegrid('append',{
	parent: node.id,  // the node has a 'id' value that defined through 'idField' property
	data: [
		id: '073',
		name: 'name73'
	]
});
</pre>
</td>
</tr>
<tr>
<td>remove</td>
<td>id</td>

<td>Remove a node and it's children nodes.</td>
</tr>
<tr>
<td>refresh</td>
<td>id</td>
<td>Refresh the specified node.</td>
</tr>
<tr>
<td>beginEdit</td>
<td>id</td>
<td>Begin editing a node.</td>

</tr>
<tr>
<td>endEdit</td>
<td>id</td>
<td>End editing a node.</td>
</tr>
<tr>
<td>cancelEdit</td>
<td>id</td>
<td>Cancel editing a node.</td>
</tr>
<tr>
<td>getEditors</td>
<td>id</td>
<td>Get the specified row editors. Each editor has the following properties:<br>
actions: the actions that the editor can do.<br>
target: the target editor jQuery object.<br>

field: the field name.<br>
type: the editor type.</td>
</tr>
<tr>
<td>getEditor</td>
<td>options</td>
<td>Get the specified editor, the options contains two properties:<br>
id: the row node id.<br>
field: the field name.</td>
</tr>

</tbody></table>

</div>	
</body>
</html>